<template>
  <div class="hotel-wrapper">
    <!-- <v-header :title="title" :fixed="true" :opacity="headerOpacity">
      <ul class="header-right" slot="right">
        <li class="btn" @click.stop="toggleCollection">
          <i class="icon iconfont" :class="collectionType === 1 ? 'icon-collection-b' : 'icon-collection'" aria-hidden="true" style="font-size: 19px;"></i>
        </li>
        <li class="btn" @click.stop="toShare">
          <i class="icon iconfont icon-share" aria-hidden="true" style="font-size: 17px; padding-top: 3px;"></i>
        </li>
      </ul>
    </v-header> -->
    <template v-if="hotel != null">
      <div class="thumb" v-lazy:backgroundImage="hotel.thumbnailId">
        <p @click.stop="showAtlas = true"><i class="icon iconfont icon-image"></i>{{atlas.length}}</p>
      </div>
      <div class="hotel-info">
        <p class="hotel-name">{{hotel.name}}</p>
        <div class="hotel-other">
          <div>
            <rater v-model="hotel.commentScore" star="<i class='icon iconfont icon-scenic-star'/>" active-color="#ff7e00" :margin="4" :disabled="true" :font-size="16"></rater>
            <span style="margin-left: 4px; font-size: 14px; color:#ff7e00; ">{{hotel.commentScore}}分</span>
          </div>
          <ul>
            <li @click.stop="toMapService">
              <i class="icon iconfont icon-scenic-service"></i>
              <p>周边服务</p>
            </li>
            <li @click.stop="toCallPhone">
              <i class="icon iconfont icon-phone"></i>
              <p>联系酒店</p>
            </li>
          </ul>
        </div>
      </div>
      <p class="hotel-address" @click="toNativeMap"><i class="icon iconfont icon-hotel-address"></i>{{hotel.address}}<i class="fa fa-angle-right" aria-hidden="true"></i></p>


      <div class="box">
        <p class="title">在线预订</p>
        <div class="select-date" @click.stop="showCalendar = true">
          <div class="date-wrapper">
            <p>入住时间<span class="date">{{startDate.format}}</span></p>
            <p class="number" @click.stop="showCalendar = true">共<span>{{diffDay}}</span>晚</p>
            <p>离店时间<span class="date">{{endDate.format}}</span></p>
          </div>
          <div class="more">
            <i class="fa fa-angle-right" aria-hidden="true"></i>
          </div>
        </div>
        <ul class="room-list" v-if="!loadingPrice && roomList.length > 0">
          <li v-for="(item, index) in roomList" :key="index"  :class="{open: item.open}">
            <div class="room-item">
              <div class="room-thumb" v-lazy:backgroundImage="item.fxzt"></div>
              <div class="room-info">
                <p class="room-name">{{item.fxmc}}</p>
                <p class="room-desc">{{item.fxms}}</p>
              </div>
              <p class="room-price">
                ￥<span>{{item.fxzdj}}</span>
              </p>
            </div>
            <ul class="price-list" v-if="item.jgjhlb.length > 0" :style="{height: item.open ? item.childHeight + 'px' : 0}" @click.stop="() => {}">
              <li v-for="(plan, index) in item.jgjhlb" :key="index">
                <div class="price-left">
                  <p class="price-name">{{plan.jhmc}}</p>
                </div>
                <div class="price-right" @click.stop="toOrder(item, plan)">
                  <p class="txt">￥<span>{{plan.srxsj}}</span></p>
                  <p class="btn">预订</p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <loading v-if="loadingPrice" tip="正在加载..." style="padding: 20px 0;"></loading>
        <p v-if="!loadingPrice && roomList.length === 0" class="error" style="padding: 30px 0 10px; text-align: center;">暂无数据~</p>
      </div>


      <div class="box">
        <p class="title">酒店介绍</p>
        <p class="desc" :class="{'no-more-desc': !showMoreIntro}">{{hotel.introEditor || '无酒店介绍'}}</p>
        <div class="down-btn"  @click="showMoreIntro = !showMoreIntro">
          <i class="icon iconfont" :class="showMoreIntro ? 'icon-up' : 'icon-down'"></i>
        </div>
      </div>
      <div class="box">
        <p class="title">服务设施</p>
        <p class="desc">{{hotel.generalAmenities || '无服务设施描述'}}</p>
      </div>
      <div class="box">
        <p class="title">房屋设施</p>
        <p class="desc">{{hotel.roomAmenities || '无房屋设施描述'}}</p>
      </div>
      

      <div class="box" v-if="scenicList.length > 0">
        <p class="title">附近景区</p>
        <ul class="hotel-list" slot="content">
          <router-link v-for="item in scenicList" :key="item.id" :to="`/scenic/${item.id}`" tag="li">
            <div v-lazy:backgroundImage="item.thumbUrl" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="desc">{{item.oneSentence}}</p>
          </router-link>
        </ul>
      </div>


      <div class="box">
        <p class="title">附近美食</p>
        <ul class="hotel-list" slot="content">
          <router-link v-for="item in foodList" :key="item.id" :to="`/foodDetailsOne/${item.id}?recommend=0`" tag="li">
            <div v-lazy:backgroundImage="item.thumbUrl" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="price">￥<span style="font-size: 15px; margin-right: 4px;">{{item.consumptionPerPerson}}</span></p>
          </router-link>
        </ul>
      </div>


      <div v-if="hotel != null && commentTotal > 0" class="box">
        <p @click="toCommentList()" class="title">来自{{commentTotal}}位游客点评<span class="more"><label style="color: #ff9c00; font-size: 20px; font-weight: normal;">{{hotel.commentScore}}<span style="font-size: 12px;">分</span></label><i class="fa fa-angle-right" aria-hidden="true"></i></span></p>
        <div class="comment-wrapper" v-if="commentList.length > 0" @click="toCommentList(commentList[0].id)">
          <div class="user-info">
            <img class="head-url" v-lazy="commentList[0].headUrl"/>
            <div>
              <p class="nickname">{{commentList[0].nickname}}</p>
              <rater v-model="commentList[0].rate" star="<i class='icon iconfont icon-scenic-star'/>" active-color="#ff7e00" :margin="2" :disabled="true" :font-size="12"></rater>
            </div>
          </div>
          <p class="comment-content">
            {{commentList[0].comment}}
          </p>
          <ul class="comment-atlas" v-if="commentList[0].matchImgUrl.length > 0">
            <li v-for="(img, index) in commentList[0].matchImgUrl" :key="index" v-lazy:backgroundImage="img" v-if="index < 3"></li>
          </ul>
        </div>
      </div>
    </template>
    <load-fail v-if="loadFail"></load-fail>

    <div v-transfer-dom>
      <popup v-model="showCalendar" position="bottom" width="100%" class="popup-wrapper">
        <div style="overflow: hidden; position: relative; background: #fff; padding-bottom: 24px;">
          <calendar :zero="calendarOpt.zero" :range="calendarOpt.range" :lunar="calendarOpt.lunar" :value="calendarOpt.value" :begin="calendarOpt.begin" :end="calendarOpt.end" @select="calendarOpt.select"></calendar>
        </div>
      </popup>
    </div>

    <!-- 图集 -->
    <div v-transfer-dom>
      <previewer :list="atlas" :options="{loop: false}" ref="previewer"></previewer>
    </div>
    <div v-transfer-dom>
      <popup v-model="showAtlas" position="bottom" width="100%" height="100%" class="popup-wrapper">
        <div class="home-atlas" style="overflow: hidden;">
          <v-header title="图集" :handleClick="true" @back="showAtlas = false">
          </v-header>
          <div :style="{height: atlasScrollHeight + 'px'}" style="margin: 3.5px; overflow-x: hidden; overflow-y: scroll;" v-if="showAtlas && atlas.length > 0">
            <waterfall :calHeight="true" :gap="7" :imgsArr="atlas" :customWidth="itemWidth" @clickItem="previewAtlas" loadingTip="正在加载酒店图集...">
            </waterfall>
          </div>
        </div>
      </popup>
    </div>

    <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="true" @on-click-menu="clickMapMenu"></actionsheet>

    <share
      v-model="showShare"
      :title="shareObj.productName"
      :desc="shareObj.productDesc"
      :thumbUrl="shareObj.thumbUrl"
      :linkUrl="shareObj.linkUrl">
    </share>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import LoadFail from '@/components/load-fail/load-fail'
import NotData from '@/components/not-data/not-data'
import Share from '@/components/share/share'
import Calendar from '@/components/calendar/calendar'
import Previewer from '@/components/previewer/previewer'
import Waterfall from '@/components/waterfall/waterfall'
import Loading from '@/components/loading/loading'
import { Rater, Datetime, TransferDom, Popup, Actionsheet } from 'vux'

import axios from '@/api/axiosApi'
import { isIphoneX, isAndroid, isIOS } from '@/assets/js/brower'
import { on } from '@/assets/js/dom'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX, APP_DOWNLOAD_PATH } from '@/api/config'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { handleBackMixin } from '@/assets/js/mixin'

const SCROLL_HEIGHT = 150

export default {
  name: 'Hotel',
  mixins: [handleBackMixin],
  data () {
    return {
      title: '',
      headerOpacity: 0,
      loadFail: false,
      showMoreIntro: false,
      showShare: false,
      showAtlas: false,
      showCalendar: false,
      showMap: false,
      loadingPrice: true,
      menusMap: {},
      calendarOpt: {
        zero: true,
        range: true,
        lunar: true, // 显示农历
        begin: this.moment()
          .add(1, 'months')
          .toArray()
          .slice(0, 3),
        // end: this.moment().add(30, 'days').toArray().slice(0, 3),
        weeks: ['日', '一', '二', '三', '四', '五', '六'],
        select: (begin, end) => {
          if (this.showCalendar === false) return
          this.showCalendar = false

          const beginDate = this.moment(begin).subtract(1, 'months')
          const endDate = this.moment(end).subtract(1, 'months')

          this.startDate = {
            date: beginDate,
            format: beginDate.format('MM-DD')
          }
          this.endDate = {
            date: endDate,
            format: endDate.format('MM-DD')
          }

          this._getRoomList()
        }
      },
      startDate: {
        date: this.moment(),
        format: this.moment().format('MM-DD')
      },
      endDate: {
        date: this.moment().add(1, 'days'),
        format: this.moment()
          .add(1, 'days')
          .format('MM-DD')
      },
      collectionType: 0,
      shareObj: {},
      hotel: null,
      roomList: [],
      scenicList: [],
      otherHotelList: [],
      foodList: [],
      commentTotal: 0,
      commentList: [],
      atlas: [],
      allPopupModels: ['showShare', 'showAtlas', 'showCalendar', 'showMap']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, LoadFail, Share, Rater, Datetime, Popup, Calendar, Waterfall, Previewer, Actionsheet, NotData, Loading
  },
  beforeRouteUpdate(to, from, next) {
    next()

    this._getScenicInfo()
    this._getHotelImages()
    // 手动滚动置顶。instant 有BUG，会事件穿透
    this.$el.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
    // 初始化参数
    this.headerOpacity = 0
  },
  computed: {
    diffDay() {
      return Math.abs(this.startDate.date.diff(this.endDate.date, 'days'))
    }
  },
  created() {
    this._getHotelInfo()
    this._getHotelImages()

    this.paddingTop = 24
    this.atlasScrollHeight = window.innerHeight - (40 + 24)
    if (isIphoneX()) {
      this.paddingTop = 34
      this.atlasScrollHeight = window.innerHeight - (40 + 34)
    }
    this.itemWidth = (window.innerWidth - 21) / 2
  },
  mounted() {
    on(this.$el, 'scroll', (e) => {
      if (e.target.scrollTop <= SCROLL_HEIGHT) {
        this.headerOpacity = e.target.scrollTop / SCROLL_HEIGHT
        this.title = ''
      } else {
        this.headerOpacity = 1
        this.title = this.hotel.name
      }
    })
  },
  methods: {
    _getHotelInfo() {
      axios.get(this, `/v1/hotel/${this.$route.params.id}`, null, (data) => {
        if (data == null) {
          this.loadFail = true
          this.headerOpacity = 1
          return
        }
        this.hotel = data

        this._viewScenic()
        this._getCollectionStatus()
        this._getRoomList()
        this._getScenicList()
        this._getOtherHotelList()
        this._getFoodList()
        this._getCommentList()
      }, () => {
        this.loadFail = true
        this.headerOpacity = 1
      })
    },
    _getHotelImages() {
      axios.get(this, `/v1/hotelImage/${this.$route.params.id}`, null, (data) => {
        data.forEach(item => {
          item.src = item.imageUrl
        })
        this.atlas = data
      })
    },
    _getRoomList() {
      this.loadingPrice = true
      axios.post(this, '/v1/b2c/hotel', {
        method: 'HOTEL_B2C_getRoomList',
        hyid: '',
        start: 1,
        count: 10,
        jdid: this.hotel.fromId,
        rzrq: this.startDate.date.format('YYYY-MM-DD'),
        ldrq: this.endDate.date.format('YYYY-MM-DD'),
        infoType: 1,
        zflx: 1 // 只做预付
      }, (data) => {
        this.loadingPrice = false
        if (data && data.res && data.res.sts === 1 && data.res.fxlb && data.res.fxlb.length > 0) {
          data.res.fxlb.forEach(item => {
            item.open = false
            item.childHeight = 0
            if (item.jgjhlb) {
              // item.jgjhlb = item.jgjhlb.filter(o => o.zflx === 1 || o.zflx === '1')
              item.childHeight = 62.5 * item.jgjhlb.length
            }
          })
          this.roomList = data.res.fxlb
        }
      }, () => {
        this.loadingPrice = false
        this.$vux.toast.text('加载房型数据失败', 'middle')
      })
    },
    _getScenicList() {
      axios.get(this, '/v1/nearbyScenic', {
        scenicNum: 3,
        longitude: this.hotel.longitude,
        latitude: this.hotel.latitude,
        distance: 50000
      }, data => {
        this.scenicList = data
      })
    },
    _getOtherHotelList() {
      axios.get(this, '/v1/recommendHotel', {
        pageSize: 3,
        areaId: this.hotel.areaId,
        hotelId: this.hotel.id
      }, (data) => {
        this.otherHotelList = data
      })
    },
    _getFoodList() {
      axios.get(this, '/v1/nearbyStoreFood', {
        storeNum: 3,
        longitude: this.hotel.longitude,
        latitude: this.hotel.latitude,
        distance: 30000
      }, (data) => {
        this.foodList = data
      })
    },
    _getCommentList() {
      axios.get(this, `/v1/productComment/${this.hotel.id}`, {
        pageSize: 1
      }, (data, total) => {
        data.forEach(item => {
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              item.headUrl += '-bheader'
            }
          } else {
            item.headUrl = defaultAvatar
          }
          if (item.matchImgUrl) {
            item.matchImgUrl = item.matchImgUrl.split(';')
          }
        })
        this.commentTotal = total
        this.commentList = data
      })
    },
    _viewScenic() {
      const userId = localUser.get('id')
      if (userId != null) {
        axios.post(this, '/v1/messageRecord', {
          userId: userId,
          targetId: this.hotel.id,
          type: 5
        }, null, null, false)
      }
    },
    _getCollectionStatus() {
      const userId = localUser.get('id')
      if (userId) {
        axios.get(this, '/v1/messageRecord/' + localUser.get('id') + '/' + this.hotel.id, null, (data) => {
          if (data) {
            this.collectionType = data.collectionType
          }
        }, null, false)
      }
    },
    toggleCollection () {
      // 切换收藏状态
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        setTimeout(() => {
          this.$router.push('/login')
        }, 200)
        return
      }
      if (this.hotel == null) {
        return
      }
      if (this.collectionType === 0) {
        this.collectionType = 1
      } else {
        this.collectionType = 0
      }
      axios.put(this, '/v1/messageRecord', {
        userId: localUser.get('id'),
        targetId: this.hotel.id,
        collectionType: this.collectionType,
        type: 5
      }, (res) => {
        if (this.collectionType === 0) {
          this.$vux.toast.text('取消收藏！')
        } else {
          this.$vux.toast.text('收藏成功！')
        }
      })
    },
    toShare() {
      if (this.hotel == null) {
        return
      }
      this.showShare = true
      this.shareObj = {
        title: this.hotel.name,
        desc: this.hotel.introduction,
        thumbUrl: this.atlas[0].src,
        linkUrl: APP_DOWNLOAD_PATH
      }
    },
    toMapService() {
      this.$router.push(`/serviceMap/${this.hotel.id}/1`)
    },
    toCallPhone() {
      if (this.hotel.phone == null) {
        this.$vux.toast.text('该酒店没有提供电话号码~', 'middle')
        return
      }
      window.location.href = 'tel://' + this.hotel.phone
    },
    toCommentList(commentId) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      this.$router.push({
        path: `/commentList/${this.hotel.id}/1`,
        query: {
          commentId: commentId
        }
      })
    },
    previewAtlas(item, index) {
      // 预览图片
      this.$refs.previewer.show(index)
    },
    toNativeMap () {
      if (isIOS()) {
        // 页面跳转至导航路线
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': this.hotel.latitude, 'longitude': this.hotel.longitude})
      } else if (isAndroid()) {
        this.menusMap = JSON.parse(window.android.isInstallByread())
        if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
          this.showCancel = false
          this.showGaoDei = true
          return
        }
        if (this.menusMap.baiDu === '2') {
          this.menusMap.baiDu = '百度地图'
        }
        if (this.menusMap.gaoDei === '1') {
          this.menusMap.gaoDei = '高德地图'
        }
        if (this.menusMap.tenXun === '3') {
          this.menusMap.tenXun = '腾讯地图'
        }
        this.showMap = true
      }
    },
    clickMapMenu (value) {
      if (isAndroid()) {
        if (value === 'baiDu') {
          window.android.makeUpMap(this.hotel.latitude, this.hotel.longitude, '', 2, 1, '')
        } else if (value === 'gaoDei') {
          window.android.makeUpMap(this.hotel.latitude, this.hotel.longitude, '', 1, 1, '')
        } else if (value === 'tenXun') {
          window.android.makeUpMap(this.hotel.latitude, this.hotel.longitude, '', 3, 1, '')
        }
      }
    },
    toOrder(room, plan) {
      this.$store.commit('SET_SELECTED_HOTEL', {
        hotel: this.hotel,
        room: room,
        plan: plan,
        params: {
          startDate: this.startDate.date.format('YYYY-MM-DD'),
          endDate: this.endDate.date.format('YYYY-MM-DD')
        }
      })
      this.$router.push('/hotelOrder')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.box
  background #ffffff
  margin-top 16px
  padding 20px 16px
.title
  color #333
  padding-bottom 20px
  line-height 1
  font-size 20px
  .more
    float right
  i
    font-size 24px
    color #999
    margin-left 8px
.desc
  font-size 15px
  color #666
  line-height 1.6
.no-more-desc
  no-wrap-n(3)
.error
  color #d3d3d3
.down-btn
  text-align center
  margin-top 16px
  font-size 16px
  color #666
.hotel-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.header-right
  display flex
  align-items center
  .btn
    extend-click()
    i
      font-size 18px
      color #fff
  li
    margin-left 20px
.thumb
  position relative
  overflow-y auto
  width 100vw
  height 56.25vw
  background-image url(../../../../assets/img/scenic-head-bg.jpg)
  background-size cover
  background-repeat no-repeat
  background-position center
  p
    position absolute
    right 16px
    bottom 16px
    color #fff
    font-size 14px
    line-height 1
    i
      font-size 13px
      margin-right 4px
.hotel-info
  padding 24px 16px
  background #fff
  border-bottom 0.5px solid #e2e2e2
  .hotel-name
    font-size 24px
    color #333
    margin-bottom 4px
    line-height 1.3
  .hotel-other
    display flex
    justify-content space-between
    align-items center
    line-height 1
    ul
      display flex
      text-align center
      color #999
      font-size 10px
      i
        font-size 21px
        color #333
      p
        margin-top 8px
      li
        &:first-child
          margin-right 16px
.hotel-address
  font-size 16px
  color #333
  line-height 1
  background #fff
  no-wrap()
  padding 16px
  padding-right 32px
  position relative
  i
    color #666
    &:first-child
      margin-right 8px
  .fa-angle-right
    font-size 18px
    position absolute
    right 16px
.select-date
  display flex
  align-items center
  padding 0 16px
  padding-bottom 16px
  border-bottom 1px solid #e2e2e2
  margin 0 -16px
  .date-wrapper
    width calc(100% - 30px)
    display flex
    justify-content space-between
    align-items center
    font-size 13px
    color #999
    line-height 1
    .date
      font-size 17px
      color #333
      display inline-block
      margin-left 6px
      transform translateY(1px)
    .number
      font-size 12px
      border 0.5px solid rgba(226, 226, 226, 0.6)
      height 21px
      line-height 21.5px
      border-radius 21px
      padding 0 10px
      max-width 60px
      no-wrap()
      span
        color #333
        font-size 14px
        margin 0 2px
  .more
    width 30px
    text-align right
    font-size 18px
    color #666
.room-list
  margin-bottom -20px
  li
    .room-item
      display flex
      justify-content space-between
      align-items center
      line-height 1
      padding 20px 0
      border-top 0.5px solid #e2e2e2
    &:first-child
      .room-item
        border-top none
  .room-thumb
    width 80px
    height 60px
    background-size cover
    background-repeat no-repeat
    background-position center
    border-radius 3px
    margin-right 10px
  .room-info
    width calc(100% - 185px)
    height 56px
    margin-top 4px
    .room-name
      font-size 15px
      color #333
      no-wrap()
    .room-desc
      margin-top 8px
      font-size 12px
      color #999
      line-height 1.4
      no-wrap-n(2)
  .room-price
    width 95px
    color $color-theme
    font-size 12px
    text-align right
    overflow hidden
    span
      font-size 20px
    i
      font-size 14px
      margin-left 4px
  .price-list
    background #fbfbfb
    height 0
    transition all .3s
    overflow hidden
    margin 0 -16px
    padding 0 16px
    li
      display flex
      justify-content space-between
      align-items center
      line-height 1
      padding 16px 0
      border-bottom 0.5px solid rgba(226, 226, 226, 0.6)
      &:last-child
        border-bottom none
    .price-left
      .price-name
        font-size 15px
        color #333
      .price-desc
        font-size 12px
        color #999
        no-wrap()
    .price-right
      display flex
      align-items center
      .txt
        color $color-theme
        font-size 12px
        span
          font-size 20px
      .btn
        font-size 15px
        color #fff
        background $color-theme
        border-radius 3px
        height 30px
        line-height 30px
        padding 0 16px
        margin-left 12px
  .open
    .room-item
      border-bottom none
.more-scenic
  display flex
  width 100%
  justify-content space-between
  li
    line-height 1
    margin-right 8px
    width calc((100vw - 48px) / 3)
    .bg
      width calc((100vw - 48px) / 3)
      height 82px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      box-shadow 0 0 8px #d0d0d0
    .name
      font-size 15px
      color #333
      margin-top 12px
      margin-bottom 8px
      no-wrap()
    .intro
      font-size 12px
      color #999
      no-wrap()
    &:last-child
      margin-right 0
.hotel-list
  display flex
  width 100%
  justify-content space-between
  li
    line-height 1
    margin-right 8px
    width calc((100vw - 48px) / 3)
    .bg
      width calc((100vw - 48px) / 3)
      height 82px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      box-shadow 0 0 8px #d0d0d0
    .name
      font-size 15px
      color #333
      margin-top 12px
      margin-bottom 8px
      no-wrap()
    .price
      font-size 12px
      color $color-theme
    .desc
      font-size 12px
      color #999
      no-wrap()
    &:last-child
      margin-right 0
.comment-wrapper
  .user-info
    display flex
    align-items center
    margin-bottom 10px
    line-height 1
    .head-url
      min-width 40px
      height 40px
      margin-right 8px
      border-radius 50%
    .nickname
      font-size 12px
      color #333
  .comment-content
    font-size 15px
    color #333
    line-height 1.3
    padding-left 48px
  .comment-atlas
    margin-top 12px
    display flex
    padding-left 48px
    li
      background-size cover
      background-repeat no-repeat
      background-position center
      width calc((100% - 16px) / 3)
      height 60px
      margin-right 8px
      border-radius 3px
      &:last-child
        margin-right 0
.comment-btn
  height 49px
  line-height 49px
  color #333
  font-size 17px
  border-top 1px solid #e2e2e2
  background #ffffff
  margin-top 16px
  text-align center
  i
    margin-right 12px
</style>
